<template>
  <div class="main">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <tab-bar v-show="$route.meta.TabBar"></tab-bar>
  </div>
</template>

<script>
import TabBar from './components/TabBar/TabBar.vue'
import {Toast} from 'mint-ui'
import {mapActions} from 'vuex'
export default {
  name: 'App',
  components: {
    TabBar
  },
  computed:{
    // 往actions里提交使用dispatch，往mutations中提交使用commit
    // 疑问：为什么这里不能使用 ...mapState([''])这是方式呢？
    ...mapActions(['getUserInfo'])
  },
  mounted(){
    // 界面刚加载时就从session中获取数据,但是忽略了我项目中所有异步代码都是在actions做集中处理的，所以使用方式2
    //this.getUserInfo();
    // 方式2
    this.$store.dispatch('getUserInfo',{callback:(message)=>{
        Toast(message);
    }});
  },
  methods: {
    // 异步请求都在actions中处理
    /*async getUserInfo(){
      let result = await login_auto();
      if(result.success_code == 200){
        this.syncUserInfo(result.message);
      }else {
        Toast('登录失效，请重新登录');
      }
    }*/
  }
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .main
    width 100vw
    height 100vh
    background-color: #f5f5f5
</style>
